<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎂 生日快乐 🎂</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 20%, #87ceeb 40%, #e0f6ff 60%, #f0f8ff 80%, #ffffff 100%);
            font-family: 'Arial', sans-serif;
            overflow: hidden;
            height: 100vh;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d;
            animation: float-3d 6s ease-in-out infinite;
        }

        @keyframes float-3d {
            0%, 100% {
                transform: translateZ(0px) rotateX(0deg) rotateY(0deg);
            }
            25% {
                transform: translateZ(20px) rotateX(2deg) rotateY(-2deg);
            }
            50% {
                transform: translateZ(40px) rotateX(0deg) rotateY(0deg);
            }
            75% {
                transform: translateZ(20px) rotateX(-2deg) rotateY(2deg);
            }
        }

        .birthday-text {
            font-size: 4rem;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.6);
            margin-bottom: 2rem;
            animation: glow 2s ease-in-out infinite alternate;
            z-index: 10;
            transform-style: preserve-3d;
            transform: translateZ(50px);
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
            background: linear-gradient(45deg, #fff, #f0f8ff, #e6f3ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @keyframes glow {
            from {
                text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
            }
            to {
                text-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 0.8);
            }
        }

        .heart {
            position: absolute;
            width: 30px;
            height: 30px;
            background: #ff6b6b;
            transform: rotate(45deg);
            animation: float 3s ease-in-out infinite;
            transform-style: preserve-3d;
            filter: drop-shadow(0 5px 15px rgba(255, 107, 107, 0.6));
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            background: #ff6b6b;
            border-radius: 50%;
        }

        .heart::before {
            top: -15px;
            left: 0;
        }

        .heart::after {
            top: 0;
            left: -15px;
        }

        @keyframes float {
            0%, 100% {
                transform: rotate(45deg) translateY(0px) translateZ(0px) rotateX(0deg);
            }
            25% {
                transform: rotate(45deg) translateY(-10px) translateZ(20px) rotateX(15deg);
            }
            50% {
                transform: rotate(45deg) translateY(-20px) translateZ(40px) rotateX(0deg);
            }
            75% {
                transform: rotate(45deg) translateY(-10px) translateZ(20px) rotateX(-15deg);
            }
        }

        .firework {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            animation: explode 1.5s ease-out forwards;
            transform-style: preserve-3d;
            filter: drop-shadow(0 0 10px currentColor);
        }

        @keyframes explode {
            0% {
                transform: scale(1) translateZ(0px);
                opacity: 1;
            }
            50% {
                transform: scale(10) translateZ(100px);
                opacity: 0.8;
            }
            100% {
                transform: scale(20) translateZ(200px);
                opacity: 0;
            }
        }

        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }

        .stars-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            z-index: -1;
        }

        .castle-background {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            z-index: -1;
            opacity: 0.3;
        }

        .castle {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            height: 200px;
        }

        .castle-tower {
            position: absolute;
            width: 60px;
            height: 120px;
            background: linear-gradient(45deg, #d4af37, #f4e4bc);
            border-radius: 30px 30px 0 0;
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
        }

        .castle-tower:nth-child(1) {
            left: 20px;
            bottom: 0;
        }

        .castle-tower:nth-child(2) {
            left: 120px;
            bottom: 0;
            height: 150px;
        }

        .castle-tower:nth-child(3) {
            right: 20px;
            bottom: 0;
        }

        .castle-wall {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 80px;
            background: linear-gradient(45deg, #d4af37, #f4e4bc);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
        }

        .castle-flag {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 30px;
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
            border-radius: 0 0 10px 10px;
            animation: flag-wave 3s ease-in-out infinite;
        }

        .forest {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            z-index: -2;
            opacity: 0.4;
        }

        .tree {
            position: absolute;
            bottom: 0;
            width: 40px;
            height: 80px;
        }

        .tree-trunk {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 30px;
            background: linear-gradient(45deg, #8B4513, #A0522D);
            border-radius: 4px;
        }

        .tree-leaves {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 50px;
            background: radial-gradient(ellipse, #228B22, #32CD32);
            border-radius: 20px;
            box-shadow: 0 0 15px rgba(34, 139, 34, 0.6);
        }

        .tree:nth-child(1) { left: 10%; animation: tree-sway 4s ease-in-out infinite; }
        .tree:nth-child(2) { left: 25%; animation: tree-sway 4s ease-in-out infinite 0.5s; }
        .tree:nth-child(3) { left: 40%; animation: tree-sway 4s ease-in-out infinite 1s; }
        .tree:nth-child(4) { left: 60%; animation: tree-sway 4s ease-in-out infinite 1.5s; }
        .tree:nth-child(5) { left: 75%; animation: tree-sway 4s ease-in-out infinite 2s; }
        .tree:nth-child(6) { left: 90%; animation: tree-sway 4s ease-in-out infinite 2.5s; }

        @keyframes tree-sway {
            0%, 100% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(2deg);
            }
        }

        @keyframes flag-wave {
            0%, 100% {
                transform: translateX(-50%) rotate(-5deg);
            }
            50% {
                transform: translateX(-50%) rotate(5deg);
            }
        }

        .star-bg {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 50%;
            animation: star-float 8s linear infinite;
        }

        .snowflake {
            position: absolute;
            color: #fff;
            font-size: 1em;
            font-family: Arial, sans-serif;
            text-shadow: 0 0 5px #fff;
            animation: snowfall linear infinite;
            z-index: 1;
        }

        @keyframes snowfall {
            0% {
                transform: translateY(-100vh) translateX(0px) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) translateX(100px) rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes star-float {
            0% {
                transform: translateZ(-1000px) scale(0.5);
                opacity: 0;
            }
            50% {
                transform: translateZ(0px) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateZ(1000px) scale(0.5);
                opacity: 0;
            }
        }

        .particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: radial-gradient(circle, #fff, #ffd700);
            border-radius: 50%;
            animation: fall 4s linear infinite;
            transform-style: preserve-3d;
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
        }

        .particle-rainbow {
            background: conic-gradient(from 0deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #8000ff, #ff0080);
            background-size: 100% 100%;
            animation: fall-rainbow 5s linear infinite;
            transform-style: preserve-3d;
            filter: drop-shadow(0 0 12px rgba(255, 0, 0, 0.6));
        }

        .particle-star {
            background: radial-gradient(circle, #fff, #ffd700, #ff6b35);
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            animation: twinkle 3s ease-in-out infinite;
            transform-style: preserve-3d;
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
        }

        .particle-meteor {
            background: linear-gradient(45deg, #fff, #00ffff, #0080ff);
            width: 3px;
            height: 20px;
            border-radius: 50%;
            animation: meteor 2s linear infinite;
            transform-style: preserve-3d;
            filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8));
        }

        .particle-sparkle {
            background: radial-gradient(circle, #fff, #ffd700);
            animation: sparkle 2s ease-in-out infinite;
            transform-style: preserve-3d;
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
        }

        .particle-magic {
            background: radial-gradient(circle, #ff69b4, #da70d6, #9370db);
            animation: magic-sparkle 3s ease-in-out infinite;
            transform-style: preserve-3d;
            filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.8));
        }

        @keyframes magic-sparkle {
            0%, 100% {
                transform: translateY(-100vh) scale(1) translateZ(0px) rotate(0deg);
                opacity: 1;
            }
            25% {
                transform: translateY(-75vh) scale(1.3) translateZ(40px) rotate(90deg);
                opacity: 0.9;
            }
            50% {
                transform: translateY(-50vh) scale(0.7) translateZ(80px) rotate(180deg);
                opacity: 1;
            }
            75% {
                transform: translateY(-25vh) scale(1.2) translateZ(60px) rotate(270deg);
                opacity: 0.8;
            }
        }

        @keyframes fall {
            0% {
                transform: translateY(-100vh) rotate(0deg) translateZ(0px);
                opacity: 1;
            }
            50% {
                transform: translateY(0vh) rotate(180deg) translateZ(50px);
                opacity: 0.8;
            }
            100% {
                transform: translateY(100vh) rotate(360deg) translateZ(100px);
                opacity: 0;
            }
        }

        @keyframes fall-rainbow {
            0% {
                transform: translateY(-100vh) rotate(0deg) scale(1) translateZ(0px);
                opacity: 1;
            }
            25% {
                transform: translateY(-75vh) rotate(90deg) scale(1.2) translateZ(30px);
                opacity: 0.9;
            }
            50% {
                transform: translateY(-50vh) rotate(180deg) scale(1.5) translateZ(60px);
                opacity: 0.8;
            }
            75% {
                transform: translateY(-25vh) rotate(270deg) scale(1.3) translateZ(40px);
                opacity: 0.7;
            }
            100% {
                transform: translateY(100vh) rotate(360deg) scale(0.5) translateZ(100px);
                opacity: 0;
            }
        }

        @keyframes twinkle {
            0%, 100% {
                transform: translateY(-100vh) scale(1) rotate(0deg) translateZ(0px);
                opacity: 1;
            }
            25% {
                transform: translateY(-75vh) scale(1.2) rotate(90deg) translateZ(40px);
                opacity: 0.8;
            }
            50% {
                transform: translateY(-50vh) scale(0.8) rotate(180deg) translateZ(80px);
                opacity: 1;
            }
            75% {
                transform: translateY(-25vh) scale(1.1) rotate(270deg) translateZ(60px);
                opacity: 0.6;
            }
        }

        @keyframes meteor {
            0% {
                transform: translateX(-100vw) translateY(-100vh) rotate(45deg) translateZ(0px);
                opacity: 1;
            }
            50% {
                transform: translateX(0vw) translateY(0vh) rotate(45deg) translateZ(100px);
                opacity: 0.8;
            }
            100% {
                transform: translateX(100vw) translateY(100vh) rotate(45deg) translateZ(200px);
                opacity: 0;
            }
        }

        @keyframes sparkle {
            0%, 100% {
                transform: translateY(-100vh) scale(1) translateZ(0px);
                opacity: 1;
            }
            50% {
                transform: translateY(-50vh) scale(1.5) translateZ(60px);
                opacity: 0.8;
            }
        }

        .cake {
            position: relative;
            width: 200px;
            height: 120px;
            margin: 2rem 0;
            z-index: 5;
            transform-style: preserve-3d;
            transform: translateZ(30px) rotateX(15deg);
            filter: drop-shadow(0 15px 25px rgba(0,0,0,0.4));
            animation: cake-float 4s ease-in-out infinite;
        }

        @keyframes cake-float {
            0%, 100% {
                transform: translateZ(30px) rotateX(15deg) translateY(0px);
            }
            50% {
                transform: translateZ(40px) rotateX(20deg) translateY(-10px);
            }
        }

        .cake-layer {
            position: absolute;
            border-radius: 10px;
            transform-style: preserve-3d;
        }

        .cake-layer-1 {
            width: 200px;
            height: 40px;
            background: linear-gradient(45deg, #ff9a9e, #fecfef);
            bottom: 0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            transform: translateZ(0px);
        }

        .cake-layer-2 {
            width: 160px;
            height: 35px;
            background: linear-gradient(45deg, #a8edea, #fed6e3);
            bottom: 40px;
            left: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            transform: translateZ(10px);
        }

        .cake-layer-3 {
            width: 120px;
            height: 30px;
            background: linear-gradient(45deg, #ffecd2, #fcb69f);
            bottom: 75px;
            left: 40px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            transform: translateZ(20px);
        }

        .candle {
            position: absolute;
            width: 8px;
            height: 30px;
            background: linear-gradient(to bottom, #ffd700, #ff8c00);
            border-radius: 4px;
            bottom: 105px;
            left: 96px;
            transform: translateZ(25px);
            filter: drop-shadow(0 5px 10px rgba(255, 140, 0, 0.4));
        }

        .flame {
            position: absolute;
            width: 12px;
            height: 20px;
            background: radial-gradient(circle, #fff, #ffd700, #ff6b35);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            bottom: 135px;
            left: 94px;
            animation: flicker 0.5s ease-in-out infinite alternate;
            transform: translateZ(30px);
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
        }

        @keyframes flicker {
            0% {
                transform: scale(1) translateZ(30px);
            }
            100% {
                transform: scale(1.1) translateZ(35px);
            }
        }

        .message {
            color: #fff;
            font-size: 1.5rem;
            text-align: center;
            margin-top: 2rem;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            z-index: 10;
            transform-style: preserve-3d;
            transform: translateZ(40px);
            filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
        }

        /* 版面切换按钮 */
        .page-indicator {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            gap: 10px;
        }

        .page-dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.5);
        }

        .page-dot.active {
            background: #fff;
            transform: scale(1.2);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        .page-dot:hover {
            background: rgba(255, 255, 255, 0.7);
            transform: scale(1.1);
        }

        /* 版面容器 */
        .page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: all 0.8s ease;
            transform: translateX(100px) scale(0.9);
        }

        .page.active {
            opacity: 1;
            visibility: visible;
            transform: translateX(0) scale(1);
        }

        /* 第二版面 - 海洋风格 */
        .page-2 {
            background: linear-gradient(135deg, #006994 0%, #0099cc 25%, #00ccff 50%, #66d9ff 75%, #b3e6ff 100%);
        }

        .ocean-waves {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background: linear-gradient(45deg, #0066cc, #0099ff, #66ccff);
            clip-path: polygon(0 100%, 100% 100%, 100% 70%, 80% 60%, 60% 70%, 40% 60%, 20% 70%, 0 60%);
            animation: wave-move 4s ease-in-out infinite;
        }

        @keyframes wave-move {
            0%, 100% { transform: translateX(0px); }
            50% { transform: translateX(-20px); }
        }

        .fish {
            position: absolute;
            width: 30px;
            height: 20px;
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            animation: fish-swim 6s linear infinite;
        }

        .fish::before {
            content: '';
            position: absolute;
            top: 5px;
            right: -5px;
            width: 10px;
            height: 10px;
            background: #ff6b6b;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        }

        @keyframes fish-swim {
            0% { transform: translateX(-100px) translateY(0px) rotateY(0deg); }
            50% { transform: translateX(50vw) translateY(-50px) rotateY(0deg); }
            51% { transform: translateX(50vw) translateY(-50px) rotateY(180deg); }
            100% { transform: translateX(100vw) translateY(0px) rotateY(180deg); }
        }

        /* 第三版面 - 太空风格 */
        .page-3 {
            background: radial-gradient(ellipse at center, #0c1445 0%, #1a1a2e 50%, #16213e 100%);
        }

        .planet {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, #ff6b6b, #c44569);
            box-shadow: 0 0 50px rgba(255, 107, 107, 0.6);
            animation: planet-rotate 20s linear infinite;
        }

        .planet:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 20%;
            left: 20%;
            animation-duration: 15s;
        }

        .planet:nth-child(2) {
            width: 60px;
            height: 60px;
            top: 60%;
            right: 25%;
            background: radial-gradient(circle, #4ecdc4, #44a08d);
            box-shadow: 0 0 40px rgba(78, 205, 196, 0.6);
            animation-duration: 25s;
            animation-direction: reverse;
        }

        @keyframes planet-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 第四版面 - 森林风格 */
        .page-4 {
            background: linear-gradient(135deg, #2d5016 0%, #4a7c59 25%, #6b8e23 50%, #9acd32 75%, #adff2f 100%);
        }

        .forest-trees {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
        }

        .forest-tree {
            position: absolute;
            bottom: 0;
            width: 60px;
            height: 120px;
        }

        .forest-tree-trunk {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 40px;
            background: linear-gradient(45deg, #8B4513, #A0522D);
            border-radius: 6px;
        }

        .forest-tree-leaves {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 80px;
            background: radial-gradient(ellipse, #228B22, #32CD32, #90EE90);
            border-radius: 30px;
            box-shadow: 0 0 20px rgba(34, 139, 34, 0.8);
        }

        .forest-tree:nth-child(1) { left: 5%; animation: tree-grow 3s ease-out; }
        .forest-tree:nth-child(2) { left: 20%; animation: tree-grow 3s ease-out 0.5s; }
        .forest-tree:nth-child(3) { left: 35%; animation: tree-grow 3s ease-out 1s; }
        .forest-tree:nth-child(4) { left: 50%; animation: tree-grow 3s ease-out 1.5s; }
        .forest-tree:nth-child(5) { left: 65%; animation: tree-grow 3s ease-out 2s; }
        .forest-tree:nth-child(6) { left: 80%; animation: tree-grow 3s ease-out 2.5s; }

        @keyframes tree-grow {
            0% { transform: scaleY(0); opacity: 0; }
            100% { transform: scaleY(1); opacity: 1; }
        }

        /* 第五版面 - 霓虹风格 */
        .page-5 {
            background: #000;
            position: relative;
            overflow: hidden;
        }

        .page-5::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 20%, #ff0080, transparent 50%),
                radial-gradient(circle at 80% 20%, #00ff80, transparent 50%),
                radial-gradient(circle at 40% 80%, #8000ff, transparent 50%),
                radial-gradient(circle at 80% 80%, #ff8000, transparent 50%);
            opacity: 0.3;
            animation: neon-pulse 4s ease-in-out infinite;
        }

        @keyframes neon-pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }

        .neon-text {
            color: #fff;
            text-shadow: 
                0 0 10px #ff0080,
                0 0 20px #ff0080,
                0 0 30px #ff0080,
                0 0 40px #ff0080;
            animation: neon-flicker 2s ease-in-out infinite alternate;
        }

        @keyframes neon-flicker {
            0% { text-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080; }
            100% { text-shadow: 0 0 5px #ff0080, 0 0 10px #ff0080, 0 0 15px #ff0080, 0 0 20px #ff0080; }
        }

        .neon-border {
            border: 3px solid #ff0080;
            box-shadow: 
                0 0 10px #ff0080,
                inset 0 0 10px #ff0080;
            animation: neon-border-pulse 3s ease-in-out infinite;
        }

        @keyframes neon-border-pulse {
            0%, 100% { box-shadow: 0 0 10px #ff0080, inset 0 0 10px #ff0080; }
            50% { box-shadow: 0 0 20px #ff0080, inset 0 0 20px #ff0080; }
        }

        @media (max-width: 768px) {
            .birthday-text {
                font-size: 2.5rem;
            }
            .cake {
                width: 150px;
                height: 90px;
            }
            .cake-layer-1 {
                width: 150px;
                height: 30px;
            }
            .cake-layer-2 {
                width: 120px;
                height: 26px;
                left: 15px;
            }
            .cake-layer-3 {
                width: 90px;
                height: 22px;
                left: 30px;
            }
            .candle {
                left: 71px;
            }
            .flame {
                left: 69px;
            }
        }
    </style>
</head>
<body>
    <!-- 版面切换指示器 -->
    <div class="page-indicator">
        <div class="page-dot active" data-page="1"></div>
        <div class="page-dot" data-page="2"></div>
        <div class="page-dot" data-page="3"></div>
        <div class="page-dot" data-page="4"></div>
        <div class="page-dot" data-page="5"></div>
    </div>

    <!-- 第一版面 - 白雪公主风格 -->
    <div class="page page-1 active" id="page1">
        <div class="stars-background" id="starsBackground"></div>
        
        <div class="castle-background">
            <div class="castle">
                <div class="castle-tower"></div>
                <div class="castle-tower"></div>
                <div class="castle-tower"></div>
                <div class="castle-wall">
                    <div class="castle-flag"></div>
                </div>
            </div>
        </div>
        
        <div class="forest">
            <div class="tree">
                <div class="tree-trunk"></div>
                <div class="tree-leaves"></div>
            </div>
            <div class="tree">
                <div class="tree-trunk"></div>
                <div class="tree-leaves"></div>
            </div>
            <div class="tree">
                <div class="tree-trunk"></div>
                <div class="tree-leaves"></div>
            </div>
            <div class="tree">
                <div class="tree-trunk"></div>
                <div class="tree-leaves"></div>
            </div>
            <div class="tree">
                <div class="tree-trunk"></div>
                <div class="tree-leaves"></div>
            </div>
            <div class="tree">
                <div class="tree-trunk"></div>
                <div class="tree-leaves"></div>
            </div>
        </div>
        
        <div class="container">
            <div class="birthday-text">🏰 白雪公主的生日祝福 🏰</div>
            
            <div class="cake">
                <div class="cake-layer cake-layer-1"></div>
                <div class="cake-layer cake-layer-2"></div>
                <div class="cake-layer cake-layer-3"></div>
                <div class="candle"></div>
                <div class="flame"></div>
            </div>
            
            <div class="message">
                愿你的生日像童话一样美好！<br>
                愿你的每一天都充满魔法和惊喜！
            </div>
            
            <div class="particles"></div>
        </div>
    </div>

    <!-- 第二版面 - 海洋风格 -->
    <div class="page page-2" id="page2">
        <div class="ocean-waves"></div>
        
        <div class="fish" style="top: 30%; animation-delay: 0s;"></div>
        <div class="fish" style="top: 50%; animation-delay: 2s;"></div>
        <div class="fish" style="top: 70%; animation-delay: 4s;"></div>
        
        <div class="container">
            <div class="birthday-text" style="color: #fff; text-shadow: 0 0 20px #0066cc;">🌊 海洋生日派对 🌊</div>
            
            <div class="cake" style="background: linear-gradient(45deg, #00ccff, #66d9ff); border: 3px solid #0066cc;">
                <div class="cake-layer cake-layer-1" style="background: linear-gradient(45deg, #00ccff, #66d9ff);"></div>
                <div class="cake-layer cake-layer-2" style="background: linear-gradient(45deg, #0099cc, #00ccff);"></div>
                <div class="cake-layer cake-layer-3" style="background: linear-gradient(45deg, #0066cc, #0099cc);"></div>
                <div class="candle" style="background: linear-gradient(to bottom, #ffd700, #ff8c00);"></div>
                <div class="flame" style="background: radial-gradient(circle, #fff, #ffd700, #ff6b35);"></div>
            </div>
            
            <div class="message" style="color: #fff; text-shadow: 0 0 15px #0066cc;">
                愿你的生日像海洋一样深邃美好！<br>
                愿你的每一天都充满海浪的活力！
            </div>
            
            <div class="particles"></div>
        </div>
    </div>

    <!-- 第三版面 - 太空风格 -->
    <div class="page page-3" id="page3">
        <div class="planet"></div>
        <div class="planet"></div>
        
        <div class="container">
            <div class="birthday-text" style="color: #fff; text-shadow: 0 0 20px #ff6b6b;">🚀 太空生日探险 🚀</div>
            
            <div class="cake" style="background: linear-gradient(45deg, #ff6b6b, #c44569); border: 3px solid #ff6b6b;">
                <div class="cake-layer cake-layer-1" style="background: linear-gradient(45deg, #ff6b6b, #c44569);"></div>
                <div class="cake-layer cake-layer-2" style="background: linear-gradient(45deg, #4ecdc4, #44a08d);"></div>
                <div class="cake-layer cake-layer-3" style="background: linear-gradient(45deg, #8000ff, #4ecdc4);"></div>
                <div class="candle" style="background: linear-gradient(to bottom, #ffd700, #ff8c00);"></div>
                <div class="flame" style="background: radial-gradient(circle, #fff, #ffd700, #ff6b35);"></div>
            </div>
            
            <div class="message" style="color: #fff; text-shadow: 0 0 15px #ff6b6b;">
                愿你的生日像宇宙一样无限精彩！<br>
                愿你的每一天都闪耀如星辰！
            </div>
            
            <div class="particles"></div>
        </div>
    </div>

    <!-- 第四版面 - 森林风格 -->
    <div class="page page-4" id="page4">
        <div class="forest-trees">
            <div class="forest-tree">
                <div class="forest-tree-trunk"></div>
                <div class="forest-tree-leaves"></div>
            </div>
            <div class="forest-tree">
                <div class="forest-tree-trunk"></div>
                <div class="forest-tree-leaves"></div>
            </div>
            <div class="forest-tree">
                <div class="forest-tree-trunk"></div>
                <div class="forest-tree-leaves"></div>
            </div>
            <div class="forest-tree">
                <div class="forest-tree-trunk"></div>
                <div class="forest-tree-leaves"></div>
            </div>
            <div class="forest-tree">
                <div class="forest-tree-trunk"></div>
                <div class="forest-tree-leaves"></div>
            </div>
            <div class="forest-tree">
                <div class="forest-tree-trunk"></div>
                <div class="forest-tree-leaves"></div>
            </div>
        </div>
        
        <div class="container">
            <div class="birthday-text" style="color: #fff; text-shadow: 0 0 20px #228B22;">🌲 森林生日庆典 🌲</div>
            
            <div class="cake" style="background: linear-gradient(45deg, #228B22, #32CD32); border: 3px solid #228B22;">
                <div class="cake-layer cake-layer-1" style="background: linear-gradient(45deg, #228B22, #32CD32);"></div>
                <div class="cake-layer cake-layer-2" style="background: linear-gradient(45deg, #90EE90, #228B22);"></div>
                <div class="cake-layer cake-layer-3" style="background: linear-gradient(45deg, #32CD32, #90EE90);"></div>
                <div class="candle" style="background: linear-gradient(to bottom, #ffd700, #ff8c00);"></div>
                <div class="flame" style="background: radial-gradient(circle, #fff, #ffd700, #ff6b35);"></div>
            </div>
            
            <div class="message" style="color: #fff; text-shadow: 0 0 15px #228B22;">
                愿你的生日像森林一样生机勃勃！<br>
                愿你的每一天都充满自然的活力！
            </div>
            
            <div class="particles"></div>
        </div>
    </div>

    <!-- 第五版面 - 霓虹风格 -->
    <div class="page page-5" id="page5">
        <div class="container">
            <div class="birthday-text neon-text" style="font-size: 5rem;">🎆 霓虹生日狂欢 🎆</div>
            
            <div class="cake neon-border" style="background: #000; border: 3px solid #ff0080;">
                <div class="cake-layer cake-layer-1" style="background: linear-gradient(45deg, #ff0080, #8000ff);"></div>
                <div class="cake-layer cake-layer-2" style="background: linear-gradient(45deg, #00ff80, #ff0080);"></div>
                <div class="cake-layer cake-layer-3" style="background: linear-gradient(45deg, #8000ff, #00ff80);"></div>
                <div class="candle" style="background: linear-gradient(to bottom, #ffd700, #ff8c00);"></div>
                <div class="flame" style="background: radial-gradient(circle, #fff, #ffd700, #ff6b35);"></div>
            </div>
            
            <div class="message neon-text" style="font-size: 2rem;">
                愿你的生日像霓虹灯一样炫酷！<br>
                愿你的每一天都闪耀夺目！
            </div>
            
            <div class="particles"></div>
        </div>
    </div>

    <script>
        // 创建爱心
        function createHeart() {
            const heart = document.createElement('div');
            heart.className = 'heart';
            heart.style.left = Math.random() * window.innerWidth + 'px';
            heart.style.top = Math.random() * window.innerHeight + 'px';
            heart.style.animationDelay = Math.random() * 2 + 's';
            document.body.appendChild(heart);
            
            setTimeout(() => {
                heart.remove();
            }, 5000);
        }

        // 创建烟花
        function createFirework() {
            const firework = document.createElement('div');
            firework.className = 'firework';
            firework.style.left = Math.random() * window.innerWidth + 'px';
            firework.style.top = Math.random() * window.innerHeight + 'px';
            
            const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3'];
            firework.style.background = colors[Math.floor(Math.random() * colors.length)];
            
            document.body.appendChild(firework);
            
            setTimeout(() => {
                firework.remove();
            }, 1500);
        }

        // 创建基础粒子
        function createParticle() {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * window.innerWidth + 'px';
            particle.style.animationDelay = Math.random() * 2 + 's';
            particle.style.animationDuration = (Math.random() * 2 + 3) + 's';
            document.querySelector('.particles').appendChild(particle);
            
            setTimeout(() => {
                particle.remove();
            }, 6000);
        }

        // 创建彩虹粒子
        function createRainbowParticle() {
            const particle = document.createElement('div');
            particle.className = 'particle particle-rainbow';
            particle.style.left = Math.random() * window.innerWidth + 'px';
            particle.style.animationDelay = Math.random() * 2 + 's';
            particle.style.animationDuration = (Math.random() * 2 + 4) + 's';
            document.querySelector('.particles').appendChild(particle);
            
            setTimeout(() => {
                particle.remove();
            }, 7000);
        }

        // 创建星星粒子
        function createStarParticle() {
            const particle = document.createElement('div');
            particle.className = 'particle particle-star';
            particle.style.left = Math.random() * window.innerWidth + 'px';
            particle.style.animationDelay = Math.random() * 2 + 's';
            particle.style.animationDuration = (Math.random() * 2 + 3) + 's';
            document.querySelector('.particles').appendChild(particle);
            
            setTimeout(() => {
                particle.remove();
            }, 6000);
        }

        // 创建流星粒子
        function createMeteorParticle() {
            const particle = document.createElement('div');
            particle.className = 'particle particle-meteor';
            particle.style.left = Math.random() * window.innerWidth + 'px';
            particle.style.top = Math.random() * window.innerHeight + 'px';
            particle.style.animationDelay = Math.random() * 1 + 's';
            particle.style.animationDuration = (Math.random() * 1 + 2) + 's';
            document.querySelector('.particles').appendChild(particle);
            
            setTimeout(() => {
                particle.remove();
            }, 4000);
        }

        // 创建闪烁粒子
        function createSparkleParticle() {
            const particle = document.createElement('div');
            particle.className = 'particle particle-sparkle';
            particle.style.left = Math.random() * window.innerWidth + 'px';
            particle.style.animationDelay = Math.random() * 2 + 's';
            particle.style.animationDuration = (Math.random() * 2 + 2) + 's';
            document.querySelector('.particles').appendChild(particle);
            
            setTimeout(() => {
                particle.remove();
            }, 5000);
        }

        // 创建魔法粒子
        function createMagicParticle() {
            const particle = document.createElement('div');
            particle.className = 'particle particle-magic';
            particle.style.left = Math.random() * window.innerWidth + 'px';
            particle.style.animationDelay = Math.random() * 2 + 's';
            particle.style.animationDuration = (Math.random() * 2 + 3) + 's';
            document.querySelector('.particles').appendChild(particle);
            
            setTimeout(() => {
                particle.remove();
            }, 6000);
        }

        // 创建多个爱心
        function createMultipleHearts() {
            for (let i = 0; i < 5; i++) {
                setTimeout(() => {
                    createHeart();
                }, i * 200);
            }
        }

        // 创建多个烟花
        function createMultipleFireworks() {
            for (let i = 0; i < 8; i++) {
                setTimeout(() => {
                    createFirework();
                }, i * 100);
            }
        }

        // 创建多个粒子
        function createMultipleParticles() {
            for (let i = 0; i < 15; i++) {
                setTimeout(() => {
                    createParticle();
                }, i * 60);
            }
        }

        // 创建多个彩虹粒子
        function createMultipleRainbowParticles() {
            for (let i = 0; i < 10; i++) {
                setTimeout(() => {
                    createRainbowParticle();
                }, i * 100);
            }
        }

        // 创建多个星星粒子
        function createMultipleStarParticles() {
            for (let i = 0; i < 8; i++) {
                setTimeout(() => {
                    createStarParticle();
                }, i * 80);
            }
        }

        // 创建多个流星粒子
        function createMultipleMeteorParticles() {
            for (let i = 0; i < 5; i++) {
                setTimeout(() => {
                    createMeteorParticle();
                }, i * 200);
            }
        }

        // 创建多个闪烁粒子
        function createMultipleSparkleParticles() {
            for (let i = 0; i < 12; i++) {
                setTimeout(() => {
                    createSparkleParticle();
                }, i * 70);
            }
        }

        // 创建多个魔法粒子
        function createMultipleMagicParticles() {
            for (let i = 0; i < 8; i++) {
                setTimeout(() => {
                    createMagicParticle();
                }, i * 90);
            }
        }

        // 定期创建效果
        setInterval(createMultipleHearts, 3000);
        setInterval(createMultipleFireworks, 4000);
        setInterval(createMultipleParticles, 2500);
        setInterval(createMultipleRainbowParticles, 3500);
        setInterval(createMultipleStarParticles, 4000);
        setInterval(createMultipleMeteorParticles, 6000);
        setInterval(createMultipleSparkleParticles, 3000);
        setInterval(createMultipleMagicParticles, 4500);
        setInterval(createMultipleSnowflakes, 8000);

        // 点击创建烟花和粒子爆炸
        document.addEventListener('click', (e) => {
            // 创建烟花
            const firework = document.createElement('div');
            firework.className = 'firework';
            firework.style.left = e.clientX + 'px';
            firework.style.top = e.clientY + 'px';
            
            const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3'];
            firework.style.background = colors[Math.floor(Math.random() * colors.length)];
            
            document.body.appendChild(firework);
            
            setTimeout(() => {
                firework.remove();
            }, 1500);

            // 创建粒子爆炸效果
            createParticleExplosion(e.clientX, e.clientY);
        });

        // 创建粒子爆炸效果
        function createParticleExplosion(x, y) {
            const particleTypes = ['particle', 'particle-rainbow', 'particle-star', 'particle-sparkle'];
            
            for (let i = 0; i < 15; i++) {
                setTimeout(() => {
                    const particle = document.createElement('div');
                    const randomType = particleTypes[Math.floor(Math.random() * particleTypes.length)];
                    particle.className = `particle ${randomType}`;
                    
                    // 从点击位置向四周扩散
                    const angle = (i / 15) * Math.PI * 2;
                    const distance = 50 + Math.random() * 100;
                    const startX = x + Math.cos(angle) * distance;
                    const startY = y + Math.sin(angle) * distance;
                    
                    particle.style.left = startX + 'px';
                    particle.style.top = startY + 'px';
                    particle.style.animationDuration = (Math.random() * 2 + 2) + 's';
                    
                    document.querySelector('.particles').appendChild(particle);
                    
                    setTimeout(() => {
                        particle.remove();
                    }, 4000);
                }, i * 50);
            }
        }

        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') {
                createMultipleFireworks();
            }
        });

        // 页面加载完成后开始动画
        window.addEventListener('load', () => {
            // 创建背景星空
            createBackgroundStars();
            
            setTimeout(() => {
                createMultipleHearts();
                createMultipleFireworks();
                createMultipleParticles();
                createMultipleRainbowParticles();
                createMultipleStarParticles();
                createMultipleMeteorParticles();
                createMultipleSparkleParticles();
                createMultipleMagicParticles();
                createMultipleSnowflakes();
                
                // 为第一版面创建特殊效果
                createPageSpecificEffects(1);
            }, 1000);
        });

        // 响应式调整
        window.addEventListener('resize', () => {
            // 重新计算位置
        });

        // 鼠标移动时创建跟随粒子
        let mouseMoveTimeout;
        document.addEventListener('mousemove', (e) => {
            clearTimeout(mouseMoveTimeout);
            mouseMoveTimeout = setTimeout(() => {
                if (Math.random() < 0.3) { // 30%的概率创建粒子
                    createMouseTrailParticle(e.clientX, e.clientY);
                }
            }, 100);
        });

        // 创建鼠标跟随粒子
        function createMouseTrailParticle(x, y) {
            const particle = document.createElement('div');
            const types = ['particle-sparkle', 'particle-star'];
            const randomType = types[Math.floor(Math.random() * types.length)];
            
            particle.className = `particle ${randomType}`;
            particle.style.left = x + 'px';
            particle.style.top = y + 'px';
            particle.style.animationDuration = '2s';
            particle.style.pointerEvents = 'none';
            
            document.querySelector('.particles').appendChild(particle);
            
            setTimeout(() => {
                particle.remove();
            }, 3000);
        }

        // 创建背景星空
        function createBackgroundStars() {
            const starsContainer = document.getElementById('starsBackground');
            const starCount = 100;
            
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star-bg';
                star.style.left = Math.random() * window.innerWidth + 'px';
                star.style.top = Math.random() * window.innerHeight + 'px';
                star.style.animationDelay = Math.random() * 8 + 's';
                star.style.animationDuration = (Math.random() * 4 + 6) + 's';
                star.style.opacity = Math.random() * 0.8 + 0.2;
                
                starsContainer.appendChild(star);
            }
        }

        // 创建雪花
        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.className = 'snowflake';
            snowflake.innerHTML = '❄';
            snowflake.style.left = Math.random() * window.innerWidth + 'px';
            snowflake.style.fontSize = (Math.random() * 1 + 0.5) + 'em';
            snowflake.style.animationDuration = (Math.random() * 3 + 5) + 's';
            snowflake.style.animationDelay = Math.random() * 5 + 's';
            
            document.body.appendChild(snowflake);
            
            setTimeout(() => {
                snowflake.remove();
            }, 8000);
        }

        // 创建多个雪花
        function createMultipleSnowflakes() {
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    createSnowflake();
                }, i * 100);
            }
        }

        // 版面切换功能
        let currentPage = 1;
        const totalPages = 5;

        function switchPage(pageNumber) {
            // 隐藏当前版面
            document.querySelector(`.page-${currentPage}`).classList.remove('active');
            document.querySelector(`[data-page="${currentPage}"]`).classList.remove('active');
            
            // 显示新版面
            document.querySelector(`.page-${pageNumber}`).classList.add('active');
            document.querySelector(`[data-page="${pageNumber}"]`).classList.add('active');
            
            currentPage = pageNumber;
            
            // 为新版面创建粒子效果
            createPageSpecificEffects(pageNumber);
        }

        function createPageSpecificEffects(pageNumber) {
            switch(pageNumber) {
                case 1: // 白雪公主风格
                    createMultipleSnowflakes();
                    break;
                case 2: // 海洋风格
                    createOceanBubbles();
                    break;
                case 3: // 太空风格
                    createSpaceDebris();
                    break;
                case 4: // 森林风格
                    createForestLeaves();
                    break;
                case 5: // 霓虹风格
                    createNeonLights();
                    break;
            }
        }

        // 海洋气泡效果
        function createOceanBubbles() {
            for (let i = 0; i < 15; i++) {
                setTimeout(() => {
                    const bubble = document.createElement('div');
                    bubble.className = 'particle';
                    bubble.style.background = 'radial-gradient(circle, rgba(255,255,255,0.8), rgba(0,204,255,0.6))';
                    bubble.style.left = Math.random() * window.innerWidth + 'px';
                    bubble.style.animationDuration = (Math.random() * 2 + 3) + 's';
                    bubble.style.animationDelay = Math.random() * 2 + 's';
                    
                    document.querySelector('#page2 .particles').appendChild(bubble);
                    
                    setTimeout(() => {
                        bubble.remove();
                    }, 6000);
                }, i * 100);
            }
        }

        // 太空碎片效果
        function createSpaceDebris() {
            for (let i = 0; i < 10; i++) {
                setTimeout(() => {
                    const debris = document.createElement('div');
                    debris.className = 'particle';
                    debris.style.background = 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #8000ff)';
                    debris.style.left = Math.random() * window.innerWidth + 'px';
                    debris.style.animationDuration = (Math.random() * 3 + 4) + 's';
                    debris.style.animationDelay = Math.random() * 2 + 's';
                    
                    document.querySelector('#page3 .particles').appendChild(debris);
                    
                    setTimeout(() => {
                        debris.remove();
                    }, 8000);
                }, i * 150);
            }
        }

        // 森林落叶效果
        function createForestLeaves() {
            for (let i = 0; i < 12; i++) {
                setTimeout(() => {
                    const leaf = document.createElement('div');
                    leaf.className = 'particle';
                    leaf.style.background = 'radial-gradient(circle, #228B22, #32CD32, #90EE90)';
                    leaf.style.left = Math.random() * window.innerWidth + 'px';
                    leaf.style.animationDuration = (Math.random() * 2 + 3) + 's';
                    leaf.style.animationDelay = Math.random() * 2 + 's';
                    
                    document.querySelector('#page4 .particles').appendChild(leaf);
                    
                    setTimeout(() => {
                        leaf.remove();
                    }, 6000);
                }, i * 120);
            }
        }

        // 霓虹灯光效果
        function createNeonLights() {
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    const light = document.createElement('div');
                    light.className = 'particle';
                    const colors = ['#ff0080', '#00ff80', '#8000ff', '#ff8000'];
                    light.style.background = colors[Math.floor(Math.random() * colors.length)];
                    light.style.left = Math.random() * window.innerWidth + 'px';
                    light.style.animationDuration = (Math.random() * 2 + 2) + 's';
                    light.style.animationDelay = Math.random() * 2 + 's';
                    light.style.filter = 'drop-shadow(0 0 10px currentColor)';
                    
                    document.querySelector('#page5 .particles').appendChild(light);
                    
                    setTimeout(() => {
                        light.remove();
                    }, 5000);
                }, i * 80);
            }
        }

        // 绑定版面切换事件
        document.addEventListener('DOMContentLoaded', function() {
            const pageDots = document.querySelectorAll('.page-dot');
            pageDots.forEach(dot => {
                dot.addEventListener('click', function() {
                    const pageNumber = parseInt(this.getAttribute('data-page'));
                    switchPage(pageNumber);
                });
            });

            // 键盘控制版面切换
            document.addEventListener('keydown', function(e) {
                if (e.code === 'ArrowRight') {
                    const nextPage = currentPage < totalPages ? currentPage + 1 : 1;
                    switchPage(nextPage);
                } else if (e.code === 'ArrowLeft') {
                    const prevPage = currentPage > 1 ? currentPage - 1 : totalPages;
                    switchPage(prevPage);
                }
            });

            // 触摸滑动支持
            let touchStartX = 0;
            let touchEndX = 0;

            document.addEventListener('touchstart', function(e) {
                touchStartX = e.changedTouches[0].screenX;
            });

            document.addEventListener('touchend', function(e) {
                touchEndX = e.changedTouches[0].screenX;
                handleSwipe();
            });

            function handleSwipe() {
                const swipeThreshold = 50;
                const diff = touchStartX - touchEndX;
                
                if (Math.abs(diff) > swipeThreshold) {
                    if (diff > 0) {
                        // 向左滑动，下一页
                        const nextPage = currentPage < totalPages ? currentPage + 1 : 1;
                        switchPage(nextPage);
                    } else {
                        // 向右滑动，上一页
                        const prevPage = currentPage > 1 ? currentPage - 1 : totalPages;
                        switchPage(prevPage);
                    }
                }
            }
        });
    </script>
</body>
</html> 